<script lang="ts" setup>
import UserCard from '@/components/UserCard.vue'
import InfoCard from '@/components/InfoCard.vue'
import GroupGrid from '@/components/GroupGrid.vue'
import { useRouter } from 'vue-router'

function goLogin() {
  // 登录逻辑
}
function goPerfectInfo() {
  // 跳转完善信息逻辑
  router.push('/basic-info')
}

const router = useRouter()
function handleGroupItemClick(item) {
  if (item.label === '基本信息') {
    router.push('/basic-info')
  } else if (item.label === '病历档案') {
    router.push('/medical-record')
  }
}

const groupList = [
  {
    title: '个人信息',
    items: [
      { icon: 'iconfont icon-user', label: '基本信息' },
      { icon: 'iconfont icon-fenlei', label: '病历档案' },
      { icon: 'iconfont icon-quanyi', label: '联系医生' },
    ]
  },
  {
    title: '健康档案',
    items: [
    //   { icon: 'iconfont icon-zzz', label: '睡眠时间' },
    //   { icon: 'iconfont icon-report', label: '用户报告' },
    //   { icon: 'iconfont icon-question', label: '用户问卷' },
    ]
  },
  {
    title: '康复管理',
    items: [
    //   { icon: 'iconfont icon-data', label: '数据中心' },
    //   { icon: 'iconfont icon-guide', label: '就诊指南' },
    //   { icon: 'iconfont icon-radiation', label: '放疗助手' },
    ]
  },
  {
    title: '订单管理',
    items: [
    //   { icon: 'iconfont icon-cart', label: '购物车' },
    //   { icon: 'iconfont icon-order', label: '购买订单' },
    //   { icon: 'iconfont icon-service', label: '售后' },
    ]
  },
]
</script>

<template>
  <div class="home-page">
    <UserCard
      weatherIcon="☀️"
      temperature="25°"
      weatherDesc="晴天"
      :onLogin="goLogin"
    />
    <InfoCard
      desc="为了方便您的计划制定，请尽快完成基础评估和病历上传"
      :onClick="goPerfectInfo"
    />
    <div class="group-list">
      <GroupGrid
        v-for="group in groupList"
        :key="group.title"
        :title="group.title"
        :items="group.items"
        @itemClick="handleGroupItemClick"
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.home-page {
  background: #ffffff;
  min-height: 95vh;
  padding-bottom: 16px;
}
.group-list {
  margin-top: 8px;
}
</style>
